<template>
	<view class="recovery">
		<view class="flex flex-x-b flex-y-c">
			<view class="image11">
				<image src="../../static/r_bg.png" alt="">
			</view>
		</view>
		<view class="address flex flex-x-b flex-y-c" @click="address()">
			<view class="flex flex-x-b flex-y-c">
				<view class="image1">
					<image src="../../static/address.png" alt="">
				</view>
				<view v-if="!show">
					点击添加回收地址
				</view>
				<view class="" v-if="show">
					<!-- 点击添加回收地址 -->
					<view class="">
						{{addressList.region.province}}
						{{addressList.region.city}}
						{{addressList.region.region}}
						<!-- {{addressList.detail}} -->
					</view>
					<view class="">
						{{addressList.detail}}
					</view>
					<view class="">
						{{addressList.name}}{{addressList.phone}}
					</view>
				</view>
			</view>
			<view class="btn">
				添加
				地址
			</view>
		</view>

		<view class="re_type">
			<view class="">
				选择回收品类
			</view>
			<view class="re_box" v-if="show==false">
				请添加地址，获取回收价格...
			</view>
			<view class="re_box_f flex flex-w" v-if="show==true">
				<view class="b_o" v-for="(item,index) in h_list" :key="index" @click="changeI(index,item)">
					<view class="changeimage" v-if="i_key==index">
						<image src="../../static/gou.png" alt="">
					</view>
					<view class="image_b">
						<image :src="item.image.external_url" alt="">
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="re_ty" v-if="show==true">
			<view class="">
				今日指导价
			</view>
			<view class="c_box" v-for="i in s_list">
				{{i.waste_name}} {{i.waste_price}}
			</view>
		</view>
		<view class="re_type">
			<view class="">
				选择预估重量（结算价格以实际为准）
			</view>
			<view class="re_box2">
				<view class="title_re flex flex-x-a flex-y-c">
					<view class="" v-for="(item,index) in t_list" :key='index' @click="change(index,item)">
						<view :class="key==index?'name-a':'name'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="b_a flex flex-x-a flex-y-c">
					<view class="tac">
						<view class="col-3 f-24">
							预计收益
						</view>
						<view class="col-48A721 f-28">
							{{o_list.summary}}
						</view>
						<view class="col-9 f-20">
							结算金额以实际为准
						</view>
					</view>
					<view class="line">

					</view>
					<view class="tac">
						<view class="col-3 f-24">
							预计获得积分
						</view>
						<view class="col-48A721 f-28">
							{{o_list.points}}
						</view>
						<view class="col-9 f-20">
							积分以下单为准
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="re_type">
			<view class="">
				回收流程
			</view>
			<view class="re_box3 flex flex-y-c flex-x-a">
				<view class="image_re">
					<image src="../../static/10.png" alt="">

				</view>
				<view class="bor"></view>
				<view class="image_re">
					<image src="../../static/11.png" alt="">

				</view>
				<view class="bor"></view>
				<view class="image_re">
					<image src="../../static/12.png" alt="">

				</view>
				<view class="bor"></view>
				<view class="image_re">
					<image src="../../static/14.png" alt="">

				</view>
			</view>
			<view class="re_box5 flex flex-y-c flex-x-b">
				<view class="image_re">
					<view class="">
						线上下单
					</view>
				</view>
				<view class="image_re">
					<view class="">
						等待上门
					</view>
				</view>
				<view class="image_re">
					<view class="">
						当面质检
					</view>
				</view>
				<view class="image_re">
					<view class="">
						钱包收款
					</view>
				</view>
			</view>
		</view>
		<view class="re_type">
			<view class="">
				回收要求和注意事项
			</view>
			<view class="re_box4 flex flex-y-e" v-for="(item,index) in list" :key="index">
				<view class="">
					<view class="text-g">
						{{item.title}}
					</view>
					<view class="text-c">
						{{item.desc}}
					</view>
				</view>
				<view class="num">
					{{item.num}}
				</view>
			</view>
		</view>
		<view class="bottom_b flex flex-x-b flex-y-c">
			<view class="b_text">
				下单即表示您已同意《上门服务条款》
			</view>
			<view class="b_btn" @click="go()">
				立即下单
			</view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/recovery'
	export default {
		data() {
			return {
				show: false,
				key: '0',
				i_key: '0',
				o_list: {},
				addressList: {},
				t_list: [{
						name: '10-20公斤'
					},
					{
						name: '20-50公斤'
					},
					{
						name: '50-100公斤'
					},
					{
						name: '100公斤以上'
					},
				],
				t_id: '',
				c_id: '',
				h_list: [],
				s_list: [],
				list: [{
						title: '拒绝掺水/掺杂',
						desc: '当回收物掺水/掺入其他异物导致重量与实际不符，回收员可拒绝回收',
						num: '01'
					},
					{
						title: '上门时间',
						desc: '下单成功，回收小哥将会与您预约上门时间并准时上门服务',
						num: '02'
					}, {
						title: '单次10kg起',
						desc: '确保回收物重量 超过10kg，低于10kg，暂不保证上门回收',
						num: '03'
					}
				]
			}
		},
		onLoad(options) {
			console.log(options)
			if(options.i_key!=undefined){
				uni.setStorageSync('i_key',options.i_key)
				uni.setStorageSync('c_id',options.c_id)
				this.i_key=uni.getStorageSync('i_key')
				this.c_id=uni.getStorageSync('c_id')
				this.getStore()
			}else{
				this.i_key=uni.getStorageSync('i_key')
				this.c_id=uni.getStorageSync('c_id')
				this.getStore()
			}
			var str = options.item
			console.log(str)
			if (str != undefined) {
				this.addressList = JSON.parse(str)
				console.log(this.addressList)
				this.show = true
				// if (this.addressList) {
				// 	this.show = true
				// } else {
				// 	this.show = false
				// }
			} else {
				this.show = false;
				this.addressList = {}
			}
			this.getList();
			this.getPageData();
		},
		onShow() {},
		methods: {
			changeI(n, m) {
				this.i_key = n;
				this.c_id = m.category_id
				this.c_name = m.waste_name
				this.c_price = m.waste_price
				this.c_integral = m.waste_integral
				this.getStore()
			},
			change(n, m) {
				this.key = n;
				this.t_id = m.service_id;
				this.t_name = m.name
				this.getPirce()
			},
			getStore() {
				Api.getWaste({
						category_id: this.c_id
					})
					.then(result => {
						this.s_list = result.data.list
					})
					.finally()
			},
			getPirce() {
				Api.serviceDetail({
						id: this.t_id
					})
					.then(result => {
						this.o_list = result.data.detail
					})
					.finally()
			},
			getPageData(callback) {
				const app = this
				const pageId = app.options.pageId || 0
				Api.wasteCategory()
					.then(result => {
						this.h_list = result.data.list
						if(this.c_id==undefined){
							this.c_id = result.data.list[0].category_id;
						}
						this.getStore()
					})
					.finally(() => callback && callback())
			},
			getList() {
				Api.serviceList()
					.then(result => {
						this.t_list = result.data.list
						this.t_id = result.data.list[0].service_id
						this.t_name = result.data.list[0].name
						this.getPirce()
					})
					.finally()
			},

			go() {
				Api.createOrder({
						address_id: this.addressList.address_id,
						service_id: this.t_id,
						service_name: this.t_name,
						waste_id: this.c_id,
						waste_name: this.c_name,
						waste_price: this.c_price,
						waste_integral: this.c_integral,
					})
					.then(result => {
						uni.showModal({
							title: '下单成功',
							content: '感谢您为环保事业做出的一份贡献',
							showCancel: false,
							buttonText: '确定',
							success: (res) => {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.switchTab({
										url: '/pages/index/index'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					})
					.finally()

			},
			address() {
				uni.navigateTo({
					url: '/pages/address/index'
				})
			}
		}
	}
</script>

<style scoped>
	.changeimage {
		width: 61rpx;
		height: 61rpx;
		position: absolute;
		right: 0;
	}

	.changeimage image {
		width: 100%;
		height: 100%;
	}

	.c_box {
		width: 388rpx;
		height: 74rpx;
		background: #66B347;
		border-radius: 18rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		padding: 20rpx;
		text-align: center;
		margin: 10px 0;
	}

	.b_o {
		width: 173rpx;
		height: 119rpx;
		background: #EBF4F3;
		border-radius: 20rpx;
		margin: 18rpx;
		position: relative;
		line-height: 50rpx;
	}

	.re_ty {
		width: 685rpx;
		/* height: 194rpx; */
		background: #F7FBF6;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding: 20rpx;
	}

	.name-a {
		font-size: 20rpx;
		color: #FFFFFF;
	}

	.name {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 0.3;
	}

	.tac {
		text-align: center;
	}

	.f-20 {
		font-size: 20rpx;
	}

	.f-24 {
		font-size: 24rpx;
	}

	.f-28 {
		font-size: 28rpx;
	}

	.col-9 {
		color: #999999;
	}

	.col-48A721 {
		color: #48A721;
	}

	.col-3 {
		color: #333333;
	}

	.b_a {
		padding: 32rpx;
	}

	.line {
		width: 1rpx;
		height: 108rpx;
		border: 3rpx solid #66B347;
	}

	.title_re {
		width: 100%;
		height: 62rpx;
		background: #66B347;
		border-radius: 20rpx 20rpx 0px 0px;
	}

	.image_re {
		/* width: 39rpx;
		height: 41rpx; */
		text-align: center;
	}

	.image_re image {
		width: 39rpx;
		height: 41rpx;
	}

	.bor {
		width: 93rpx;
		height: 2rpx;
		line-height: 2rpx;
		border: 2rpx dashed #4999E2;
	}

	.text-g {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #66B347;
	}

	.text-c {
		width: 484rpx;
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #565656;
		margin-top: 24rpx;
		margin-right: 30rpx;
	}

	.num {
		font-size: 70rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: rgba(102, 179, 71, 0.53);
	}

	.flex {
		display: flex;
	}

	.flex-x-b {
		justify-content: space-between;
	}

	.flex-y-c {
		align-items: center;
	}

	.flex-y-e {
		align-items: end;
	}

	.flex-x-a {
		justify-content: space-around;
	}

	.flex-w {
		flex-wrap: wrap;
	}

	.recovery {
		width: 750rpx;
		background: #eff7ec;
		padding: 0 32rpx 32rpx 32rpx;
		padding-bottom: 120rpx;
	}

	.address {
		width: 686rpx;
		padding: 20rpx 0;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.btn {
		width: 133rpx;
		height: 110rpx;
		background: #66B347;
		border-radius: 20rpx;
		padding: 21rpx 30rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}

	.image1 {
		width: 31rpx;
		height: 39rpx;
		margin: 0 20rpx;
	}

	.image1 image {
		width: 100%;
		height: 100%;
	}

	.re_type {
		width: 686rpx;
		/* height: 294rpx; */
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 24rpx;
		padding: 30rpx;
	}

	.re_box {
		height: 175rpx;
		background: #EBF4F3;
		border-radius: 20rpx;
		margin-top: 30rpx;
		text-align: center;
		line-height: 175rpx;
	}

	.re_box_f {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;
		text-align: center;
		line-height: 104rpx;
		/* padding: 20rpx; */
	}

	.re_box2 {
		border: 1px solid #66B347;
		/* height: 175rpx; */
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.bottom_b {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		background: #FFFFFF;
		padding: 16rpx 32rpx;
	}

	.b_btn {
		width: 242rpx;
		height: 72rpx;
		background: #66B347;
		border-radius: 36rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.b_text {
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}

	.re_box4 {
		width: 633rpx;
		background: rgba(102, 179, 71, 0.05);
		border-radius: 20rpx;
		padding: 17rpx 25rpx;
		margin-top: 30rpx;
	}

	.image11 {
		width: 100%;
		height: 200rpx;
	}

	.image11 image {
		width: 100%;
		height: 100%;
	}

	.re_box3 {
		width: 590rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}


	.image_b {
		width: 60rpx;
		height: 60rpx;
		margin: 0 auto;
	}

	.image_b image {
		width: 100%;
		height: 100%;
	}
</style>
